<template>
  <div>
    <h1>充值中心</h1>
    <div>
      充值方式
      <select name="" id="" v-for="i in list" :key="i" v-model="mode">
        <option :value="i.card_number">{{ i.card_name }}</option>
      </select>
     <div> <van-field label="充值金额" v-model="price" style="width: 200px;"></van-field></div>
      <van-button @click="top_ups">充值</van-button>
      <van-popup v-model:show="show_hours" closeable close-icon="close" :style="{ height: '40%' ,width: '30%' }">
        <center><h1>请输入充值密码</h1>
          <h3>充值{{this.price}}到账户余额中</h3></center>
        <van-field v-model="password" type="password" label="密码" />
        <van-button @click="queren">确认</van-button>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: "zhongzhi",
  data() {
    return {
      list: [],
      price: '',
      mode: '',
      show_hours:false,
      password:''
    }
  },
  methods: {
    queren(){
      this.myaxios('http://localhost:5000/get_user', 'get', {
        'uid': localStorage.getItem('usrid'),
        'code': this.password,
      })
          .then(res => {
            console.log(res)
            if (res.code=='200'){
              this.myaxios('http://localhost:5000/recharge_mode', 'post', {
                'uid': localStorage.getItem('usrid'),
                'mode': this.mode,
                'price': this.price
              })
                  .then(res => {
                    console.log(res)
                    if (res.code==200){
                      this.show_hours=false
                    }
                  })
            }else {
              alert(res.msg)
            }
          })

    },
    top_ups() {
      this.show_hours=true
      console.log(this.mode)
      console.log(this.price)
    },
    get_ban() {
      this.myaxios('http://localhost:5000/get_bank_card', 'get', {'uid': localStorage.getItem('usrid')})
          .then(res => {
            console.log(res)
            this.list = res.data
          })
    }
  },

  mounted() {
    this.get_ban()

  }
}
</script>

<style scoped>

</style>
